import React from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import './App.css'

import Login from './pages/Login'
import Main from './pages/Main'
import NotFind from './pages/404'

import About from './pages/Main/About'
import Home from './pages/Main/Home'

import Music from './pages/Main/Home/Music'
import News from './pages/Main/Home/News'

export default function App() {
  // 创建路由组件
  return (
    <Routes>
      <Route path='/login' element={<Login />} />
      <Route path='/main' element={<Main />}>
        <Route path='/main/about' element={<About />} />
        <Route path='/main/home' element={<Home />}>
          <Route path='/main/home/music' element={<Music />} />
          <Route path='/main/home/news' element={<News />} />
        </Route>
        <Route path='/main/' element={<Navigate to='/main/about' />} />
      </Route>
      <Route path='/' element={<Navigate to='/main' />} />
      <Route path='*' element={<NotFind />} />
    </Routes>
  )
}
